<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>已到账订单明细frm</title>
  	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <style>
        /*横向商品列表*/
        .goodsListbox{width: 100%;height: auto;padding:0.2rem 0.26rem;box-sizing: border-box;}
        .goodsListItem{width: 100%;background: #fff;margin-bottom: 0.2rem;height:4.86rem;box-sizing: border-box;
          padding: 0.26rem;border-radius: 0.3rem;}
        .goodsListItemleft{width:2.626rem;height: 2.626rem;margin-right: 0.1rem;position: relative;}
        .goodsListItemleft img:nth-child(1){width:2.626rem;height:2.626rem;border-radius: 0.1rem;min-width: 2.626rem;}
        .iconbiaoqian{position: absolute;width:1.44rem;height:0.68rem;top:0.1rem;left:-0.12rem;}
        .goodsListItemright{width: 100%;padding:0.1rem 0.1rem;box-sizing: border-box;position: relative;}
        .goodsListItemright .goodsTitle{line-height: 0.48rem;font-size: 0.4rem;overflow: hidden;text-overflow: ellipsis;
          display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding: 0px;margin: 0px;height: 0.96rem;}
        .goodsTitleIcon{width: 0.4rem;;height:0.4rem;vertical-align: middle;display: inline-block;margin-bottom:0.05rem;}
        .goodsMsg{display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 0.1rem 0;align-items:flex-end;}
        .goodsPrice{color:#ff0000;font-size:0.32rem;}
        .orderTime{}
        .goodsPrice	span{color: #ff0000;font-size:0.51rem}
        .volumeNum{color: #999;font-size:0.32rem;padding-bottom: 0.1rem;}
        .orderNumBox{display: flex;flex-wrap:nowrap;justify-content:space-between;height:0.8rem;align-items:center;border-bottom: 1px solid #ededed;}
        .orderNumBox div:nth-child(2){padding:0.05rem 0.25rem;border:1px solid #ededed;border-radius:0.4rem;display;flex;align-items:center}
        .buTieBox{display: flex;flex-wrap: nowrap;justify-content: space-between;height:0.8rem;align-items: flex-end;}
        .buTieBox div:nth-child(2){}
        .noneGoods{display: none;padding-top: 2rem;}
        .noneGoods img{width: 40%;margin: 0 auto;}
        .noneGoods p{width: 100%;color: #999;align-items: center;padding-top: 0.2rem;text-align: center;}
    </style>
</head>
<body id="wrap">
    <div class="goodsListbox" id="app" v-cloak>
        <div class="goodsListItem" v-for="item in order_listData">
            <div style="display: flex;flex-wrap: nowrap;justify-content: flex-start;">
                <div class="goodsListItemleft">
                    <img :src="item.item_img" alt="">
                </div>
                <div class="goodsListItemright" style="align-items: center;">
                    <div class="goodsTitle">
                        <img class="goodsTitleIcon"  v-if="item.flow_source == 1 && item.order_type.indexOf('淘宝') >= 0" src="../../../image/goods/bill_icon_taobao.png" alt=""/>
                        <img class="goodsTitleIcon" v-if="item.flow_source == 1 && item.order_type.indexOf('天猫') >= 0" src="../../../image/goods/bill_icon_tmall.png" alt=""/>
                        <img class="goodsTitleIcon"  v-if="item.flow_source == 2"   src="../../../image/goods/pd.png" alt=""/>
                        <img class="goodsTitleIcon" v-if="item.flow_source == 3" src="../../../image/goods/jd.png" alt=""/>
                        {{item.item_title}}
                    </div>
                    <div class="goodsMsg">
                        <span class="goodsPrice">已付款￥<span>{{item.alipay_total_price}}</span></span>
                        <span class="volumeNum"></span>
                    </div>
                    <div class="orderTime sg-text-size22 sg-color-font5">
                        <p class="sg-text-size22">下单时间：{{item.tk_create_time}}</p>
                    </div>
                </div>
            </div>
            <div class="sg-text-size22 sg-color-font5 orderNumBox">
                <div>订单编号：{{item.trade_parent_id}}</div>
                <div class="sg-text-size24" tapmode @click="copyNum(item.trade_parent_id)">
                    复制单号
                </div>
            </div>
            <div class="buTieBox sg-text-size24 sg-color-font3">
                <div>补贴￥<span class="sg-text-size38" style="padding-right:0.3rem">{{item.per_price}}</span>
                    <span class="sg-color-font2 sg-text-size22">补贴已到账</span>
                </div>
                <div v-if="item.tk_status == 3">已到账</div>
            </div>
        </div>
        <div class="noneGoods" tapmode onclick="getGoodsListData()">
            <img src="../../../image/noGoods.png" alt="">
            <p class="sg-text-size32">暂无商品</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
var search_history = []; //历史搜索列表数据
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    //初始化数据
    initializeData();
    //切换订单平台
    api.addEventListener({
        name: 'OrderDataFun'
    }, function(ret, err){
        if( ret ){
            // 下拉刷新页面数据重置页码数据
            api.refreshHeaderLoading();
        }else{
             alert( JSON.stringify( err ) );
        }
    });

    // 下拉刷新页面数据重置页码数据
		api.setRefreshHeaderInfo({
				loadingImg: 'widget://image/refresh.png',
				bgColor: '#fff',
				showTime: "false"
		}, function (ret, err) {
				if (ret) {
						app.next_p = 1;
						app.next_id = 1;
						getGoodsListData();
				} else {
						api.refreshHeaderLoadDone();
				}
		});
    //上拉加载新一页数据 - 第三步（可选）
    if (app.whetherToLoading == false) {
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 200 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err) {
            if (!app.isLast) {
                app.whetherToLoading = true;
                app.next_p ++;
                getGoodsListData();
            }else{
                api.toast({
                    msg: '已经到底了',
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    }
    // 获取热门搜索数据
    getGoodsListData();
}

// 初始化数据
function initializeData(){
    app = new Vue({
        el: '#app',
        data: {
            whetherToLoading : false,//上拉加载状态 加载中上拉无效
            status : 3,
            next_p : 1,//获取当前页的数据
            pf:$api.getStorage("PlatformType"),
            order_listData:[],//搜索商品数据对象
        }
    });
}
// 获取热门搜索数据
function getGoodsListData(){
    api.showProgress({
        title: '努力加载中...',
        text: '先喝杯茶...',
        modal: false
    });
    console.log($api.getStorage("PlatformType"))
    $api.ajax({
        url: 'api/order/list',
        method: 'get',
        data: {
            values: {
                status: app.status,
                next_p: app.next_p,
                pf:$api.getStorage("PlatformType"),
            }
        },
    }, function (ret,err) {
        api.refreshHeaderLoadDone(); //移除下拉刷新状态
        app.whetherToLoading == false
        if(ret){
            if(ret.code == 0){
                // 第一页就没有商品的情况
                if(app.next_p == 1 && ret.data.list.length == 0){
                    $api.css($api.dom('.noneGoods'),'display:block');
                }else{
                    $api.css($api.dom('.noneGoods'),'display:none');
                }
                if (ret.data.next_id) { //后台让我加的多余的分页
                    app.next_id = ret.data.next_id;
                }
                if(app.next_p == 1){
                    app.order_listData = ret.data.list;
                }else {
                    app.order_listData = app.order_listData.concat(ret.data.list)
                }

                if(ret.data.list.length == 0){//没有商品了到最后一页了
                    app.isLast = 1;
                }
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
        api.hideProgress();
    });
}


function copyNum(item) {
    console.log(item)
    let clipBoard = api.require("clipBoard");
    clipBoard.set({
        value: item
    }, function (ret, err) {
        if (ret) {
            api.toast({
                msg: "复制成功",
                duration: 2000,
                location: 'middle'
            });
        } else {
            // alert(JSON.stringify(err));;
        }
    });
}

// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
